<template>
  <div class="mod-index-img">
    <el-dialog :title="!dataForm.brandId ? this.$i18n.t('brand.add') : this.$i18n.t('brand.revise')"
               :close-on-click-modal="false" :visible.sync="visible" @close="closeDialogHandle" width="570px">
      <el-form :model="dataForm" ref="dataForm" :rules="dataRule" label-width="auto" size="small">

        <el-form-item label="模型名称" prop="name">
          <el-input size="small" v-model="dataForm.name" maxlength="20" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="选择博物馆" >
          <el-select v-model="dataForm.museumId" placeholder="选择博物馆" filterable>
            <el-option
              v-for="item in museumOptions"
              :key="item.id"
              :label="item.museumName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

<!--        <el-form-item label="选择绑定商品" >-->
<!--          <el-radio-group v-model="dataForm.bindType" @change="bindTypeChange">-->
<!--            <el-radio :label="1">商品</el-radio>-->
<!--            <el-radio :label="2">盲盒</el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
        <el-form-item label="选择商品/盲盒" >
          <el-select v-model="dataForm.prodId" placeholder="选择商品/盲盒" filterable>
            <el-option
              v-for="item in prodOptions"
              :key="item.prodId"
              :label="item.prodName"
              :value="item.prodId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="模型图片" prop="img">
          <img-upload v-model="dataForm.img"></img-upload>
        </el-form-item>
        <el-form-item label="模型文件">
          <FileUpload v-model="dataForm.route" valueData="route" @fileChange="fileChange"/>
        </el-form-item>

        <el-form-item label="模型简介">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入内容"
            v-model="dataForm.detail">
          </el-input>
        </el-form-item>
        <el-form-item label="是否支持扫描">
          <el-radio-group v-model="dataForm.isScan">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="扫描图片"
                      v-if="dataForm.isScan === 1">
          <img-upload v-model="dataForm.scanImg"></img-upload>
        </el-form-item>
        <el-form-item label="扫描文件"
                      v-if="dataForm.isScan === 1">
          <FileUpload v-model="dataForm.scanModel" valueData="model3dName" @fileChange="fileChange"/>
        </el-form-item>


      </el-form>
      <span slot="footer" class="dialog-footer">
        <div class="default-btn" @click="visible = false">{{ $t('remindPop.cancel') }}</div>
        <div class="default-btn primary-btn" @click="dataFormSubmit()">{{ $t('remindPop.confirm') }}</div>
      </span>
    </el-dialog>
  </div>
</template>

<script>


  import FileUpload from '@/components/file-upload'
  import ImgUpload from '@/components/img-upload'
  import {Debounce} from '@/utils/debounce'
  import {validNoEmptySpace} from '@/utils/validate'

  export default {
    data () {
      return {
        museumOptions:[],
        prodOptions:[],
        dataForm: {
          id: 0,
          name: '',
          img: '',
          isScan: 0,
          scanImg: '',
          scanModel: '',
          route: '',
          detail: '',
          museumId: '',
          prodId: '',
          bindType: 1,
        },
        brandSelectVisible: false,
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        dataRule: {

          name: [
            {required: true, message: "请输入模型名称", trigger: 'blur'}
          ],
          img: [
            {required: true, message: "请选择图片", trigger: 'blur'}
          ],
        },
        visible: false,
      }
    },
    components: {
      ImgUpload,
      FileUpload
    },
    methods: {
      // 获取分类数据
      init (id) {
        // 获取博物馆列表
        this.$http({
          url: this.$http.adornUrl('/platform/museum/list'),
          method: 'get',
          params: this.$http.adornParams({

          })
        }).then(({data}) => {
          this.museumOptions = data
        })

        // 获取商品列表
        this.$http({
          url: this.$http.adornUrl('/prod/prod/listProds'),
          method: 'get',
          params: this.$http.adornParams({

          })
        }).then(({data}) => {
          this.prodOptions = data
        })

        this.selectedCategories = []
        this.visible = true
        this.dataForm.id = id || 0
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
        })
        if (this.dataForm.id) {
          // 获取产品数据
          this.$http({
            url: this.$http.adornUrl(`/platform/museumModel/info/${this.dataForm.id}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            this.dataForm = data
            this.dataForm.isScan = parseInt(data.isScan)

          })
        }
      },
      bindTypeChange(){
        if(this.dataForm.bindType === 1){
          // 获取商品列表
          this.$http({
            url: this.$http.adornUrl('/prod/prod/listProds'),
            method: 'get',
            params: this.$http.adornParams({

            })
          }).then(({data}) => {
            this.prodOptions = data
          })
        }else{
          // 获取盲盒列表

        }
      },

      fileChange (data) {
        if (data.valueData === 'model3dName') {
          // 3D模型3d文件
          this.dataForm.scanModel = data.filePath
        }
        // 3D模型贴图
        else if (data.valueData === 'route') {
          this.dataForm.route = data.filePath
        }
      },
      // 表单提交
      dataFormSubmit: Debounce(function () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            let param = this.dataForm

            this.$http({
              url: this.$http.adornUrl(`/platform/museumModel`),
              method: param.id ? 'put' : 'post',
              data: this.$http.adornData(param)
            }).then(({data}) => {
              this.$message({
                message: this.$i18n.t('remindPop.success'),
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList', this.page)
                }
              })
            })
          }
        })
      }, 1500),
      // 关闭对话框回调
      closeDialogHandle () {
        this.$refs['dataForm'].resetFields()
        this.dataForm = {
          id: 0,
          name: '',
          img: '',
          isScan: 0,
          scanImg: '',
          scanModel: '',
          route: '',
          detail: '',
          museumId: 1,
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .el-input__inner {
    line-height: 1px !important;
  }

  .mod-index-img {
    .select-categoryId {
      width: 60%;
    }
  }
</style>
